<template>
  <div>
    <div class="mine-info">
      <div class="mine-info__img" v-bind:style="{backgroundImage: iconUrl}"></div>
      <div class="mine-info__content">
        <div class="mine-info__el name">{{stationDetail.name || '配送站'}}</div>
        <div class="mine-info__el">存款：{{billInfo.deposit || 0}}元</div>
        <div class="mine-info__el">欠款：{{billInfo.debt || 0}}元&nbsp;&nbsp;&nbsp;<a class="mine-info__detail" @click="goDebtDetail">详情</a></div>
      </div>
      <!-- <div class="mine-company-phone" @click="phone">
        <van-icon name="phone-o" ></van-icon>
      </div> -->
    </div>
    <div class="mine-menu">
      <van-cell-group>
        <van-cell title="配送站设置" to="/stationEdit" is-link>
          <i class="iconfont icon-jinhuo" slot="icon"></i>
        </van-cell>
        <van-cell title="配送员设置" to="/senderSetting" is-link>
          <i class="iconfont icon-waimai" slot="icon"></i>
        </van-cell>
        <!-- <van-cell v-if="stationInfo.cardNo != -1" title="进货订单" to="/stockOrder" is-link>
          <i class="iconfont icon-dingdan" slot="icon"></i>
        </van-cell> -->
        <van-cell title="商品审核" to="/productApproval" is-link>
          <i class="iconfont icon-caiwu" slot="icon"></i>
        </van-cell>
        <van-cell title="客户管理" to="/customerManagement" is-link>
          <i class="iconfont icon-wode" slot="icon"></i>
        </van-cell>
        <!-- <van-cell title="水桶管理" to="/bucketManagement" is-link>
          <i class="iconfont icon-water_icon" slot="icon"></i>
        </van-cell> -->
        <!-- <van-cell title="财务管理" to="/financeManagement" is-link>
          <i class="iconfont icon-caiwu" slot="icon"></i>
        </van-cell> -->
        <van-cell title="财务管理" to="/dealInfo" is-link>
          <i class="iconfont icon-caiwu" slot="icon"></i>
        </van-cell>
        <van-cell title="配送站二维码" to="/qrSetting" is-link>
          <van-icon name="qr" slot="icon" />
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import {GET_DETAIL_BY_ID, STATION_BILL_INFO} from '@/api/user';
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['stationInfo']),
    //用户头像
    iconUrl(){
      if(this.stationDetail.icon != ''){
        return 'url(' + this.stationDetail.icon + ')';
      }
      return ''
    }
  },
  data(){
    return {
      stationDetail: {},
      billInfo: {}
    }
  },
  mounted(){
    this.getDetail();
  },
  methods: {
    getDetail(){
      //获取配送站统计详情
      this.$reqGet(GET_DETAIL_BY_ID, {stationId: this.stationInfo.id}).then(res => {
        this.stationDetail = res.data;
      });
      this.$reqGet(STATION_BILL_INFO, {stationId: this.stationInfo.id}).then(res => {
        this.billInfo = res.data;
      });
    },
    goDebtDetail(){
      this.$router.push({name: 'billInfo'});
    },
    phone(){
      window.location.href='tel:15712961120'
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../styles/variable.less';
.mine-company-phone{
  position: fixed;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  line-height: 28px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
.mine-info{
  display: flex;
  padding: 20px 0 20px 10px;
  background-color: @col-the;
  color: #ffffff;
  .mine-info__img{
    flex: 0 0 90px;
    margin-right: 15px;
    background: url('../../assets/product.png');
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
  }
  .mine-info__el{
    font-size: 12px;
    margin-bottom: 6px;
    &.name{
      font-size: 18px;
      margin-bottom: 20px;
    }
  }
  .mine-info__detail{
    color: #ffcc13;
  }
}

.mine-menu{
  margin-top: 10px;
  .iconfont {
    margin-right: 10px;
    font-size: 18px;
  }
  .van-icon {
    margin-top: 2px;
    margin-right: 10px;
    font-size: 18px;
  }
}
</style>
